<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
    />
    <title>hmmm</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <script src="js/flexible.js"></script>
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <h1>黑马面面</h1>
    </header>
    <!-- nav -->
    <section class="nav">
      <nav>
        <a href="#"><img src="icon/icon1.png" alt="" /><span>HR面试</span></a>
        <a href="#"><img src="icon/icon2.png" alt="" /><span>笔试</span></a>
        <a href="#"><img src="icon/icon3.png" alt="" /><span>技术面试</span></a>
        <a href="#"><img src="icon/icon4.png" alt="" /><span>模拟面试</span></a>
        <a href="#"><img src="icon/icon5.png" alt="" /><span>面试技巧</span></a>
        <a href="#"><img src="icon/icon6.png" alt="" /><span>薪资查询</span></a>
      </nav>
      <section class="go"><img src="images/go.png" alt="" /></section>
    </section>
    <!-- 就业指导 -->
    <section class="content">
      <div class="con_hd">
        <h4>
          <span class="icon"> <img src="icon/i2.png" alt="" /></span>就业指导
        </h4>
        <a href="#" class="more">更多>> </a>
      </div>
      <div class="get_job_focus">
        <div class="swiper-container get_job_fo">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#"><img src="images/pic.png" alt="" /></a>
              <p>如何应对面试的技巧</p>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="images/2.jpg" alt="" /></a>
              <p>如何应对面试的技巧</p>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="images/3.jpg" alt="" /></a>
              <p>如何应对面试的技巧</p>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="images/pic.png" alt="" /></a>
              <p>如何应对面试的技巧</p>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="images/2.jpg" alt="" /></a>
              <p>如何应对面试的技巧</p>
            </div>
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <!-- js部分 -->
      <script src="js/swiper-bundle.min.js"></script>
    </section>
    <!-- 充电学习 -->
    <section class="content">
      <div class="con_hd">
        <h4>
          <span class="icon"> <img src="icon/i2.png" alt="" /></span>充电学习
        </h4>
        <a href="#" class="more">更多>> </a>
      </div>
      <div class="study">
        <div class="swiper-container study_fo">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#"
                ><img src="images/pic1.png" alt="" />
                <p>如何应对面试的技巧 低调说英语</p>
                <span class="txt1">156</span><span class="txt2">人学习</span></a
              >
            </div>
            <div class="swiper-slide">
              <a href="#"
                ><img src="images/pic2.png" alt="" />
                <p>顶级金字塔思维</br>提升书写能力</p>
                <span class="txt1">156</span><span class="txt2">人学习</span></a
              >
            </div>
            <div class="swiper-slide">
              <a href="#"
                ><img src="images/pic1.png" alt="" />
                <p>如何应对面试的技巧</p>
                <span class="txt1">156</span><span class="txt2">人学习</span></a
              >
            </div>
            <div class="swiper-slide">
              <a href="#"
                ><img src="images/pic2.png" alt="" />
                <p>如何应对面试的技巧</p>
                <span class="txt1">156</span><span class="txt2">人学习</span></a
              >
            </div>
          </div>
        </div>
      </div>
      <!-- js部分 -->
      <script src="js/swiper-bundle.min.js"></script>
      <script>
        (function () {
          var swiper = new Swiper(".get_job_fo", {
            slidesPerView: 2,
            spaceBetween: 00,
            centeredSlides: true,
            loop: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        })();
        (function () {
          var swiper = new Swiper(".study_fo", {
            slidesPerView: 2.3,
            spaceBetween: 15,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        })();
      </script>
    </section>
    <!-- 导航栏 -->
    <footer class="footer">
      <div class="item"><a href="#"><img src="icon/home.png" ><p>首页</p></a></div>
      <div class="item"><a href="#"><img src="icon/ms.png" ><p>模拟面试</p></a></div>
      <div class="item"><a href="#"><img src="icon/net.png" ><p>技术面试</p></a></div>
      <div class="item"><a href="#"><img src="icon/user.png" ><p>我的主页</p></a></div>
    </footer>
  </body>
</html>
